<!--
 * @Author: jiutian
 * @Date: 2023-02-03 17:05:44
 * @LastEditTime: 2023-02-06 15:19:34
 * @LastEditors:  
-->
<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import WangEditor from "./component/wangEditor.vue";
import _debounce from "loadsh/debounce";
import { ElNotification } from "element-plus";
import request from "@api";

/**
 * @description 数据
 */

let leftHtml = ref("");
let blogTitle = ref("");
let text = ref("");
/**
 * @description 方法
 */

function editChange(val: any) {
  leftHtml.value = val.html;
  text.value = val.text;
}

const save = _debounce(function () {
  if (!leftHtml.value) return;
  if (!blogTitle.value) {
    ElNotification({
      title: "提示",
      message: "请填写博客标题",
      type: "warning",
      showClose: false,
    });
    return;
  }
  request["check/saveBlog"]({
    data: {
      blogStr: leftHtml.value,
      blogTitle: blogTitle.value,
      blogText: text.value,
    },
  }).then((res: any) => {
    if (res.code == 200) {
      ElNotification({
        title: "success",
        message: res.msg,
        type: "success",
        showClose: false,
      });
    } else {
      ElNotification({
        title: "error",
        message: res.msg,
        type: "error",
        showClose: false,
      });
    }
  });
}, 300);
</script>

<template>
  <div class="publish">
    <div class="title">
      <el-input
        placeholder="博客标题"
        v-model.trim="blogTitle"
        maxlength="30"
        show-word-limit
      ></el-input>
    </div>
    <WangEditor class="WangEditor" @editChange="editChange"></WangEditor>
    <div class="bottom">
      <el-button type="primary" @click="save">发布</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.publish {
  // height: calc(100vh - 160px);
  padding: 20px;
  .WangEditor {
    width: 80%;
    margin: 0 auto;
  }
  .title {
    height: 30px;
    margin-bottom: 10px;
    text-align: center;
    :deep() {
      .el-input {
        width: 40%;
      }
    }
  }
  .bottom {
    height: 50px;
    line-height: 50px;
    text-align: center;
    .el-button {
      padding: 12px 30px;
    }
  }
}
</style>